<template>
  <div class="productInfo">
    <img :src="props.productData.productImage" @click="toProductDetail" />
    <p class="title">{{ props.productData.productName }}</p>
    <div class="skus">
      <el-dropdown trigger="click" @command="chooseSku">
        <span class="el-dropdown-link">
          {{ currentSku.skuName || '请选择规格' }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="item in props.productData.composeSkuInfoList"
              :key="item.skuId"
              :command="item"
            >{{ item.skuName }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'

const props = defineProps({
  productData: {
    type: Object,
    default: () => ({})
  },
  index: Number
})

const emit = defineEmits(['jump', 'getsku'])

const currentSku = ref({
  price: 0,
  skuId: 0,
  skuName: ''
})

function toProductDetail () {
  emit('jump', {
    productId: props.productData.productId,
    skuId: props.productData.composeSkuInfoList[0].skuId
  })
}
function chooseSku (item) {
  currentSku.value = item
  emit('getsku', {
    item,
    index: props.index
  })
}
</script>

<style lang="scss" scoped>
.productInfo{
  width: 180px;
  display: flex;
  flex-direction: column;
  img{
    width: 100px;
    height: 100px;
    margin: auto;
    cursor: pointer;
  }
  .title{
    width: 100%;
    margin: 10px 0;
    text-align: center;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .skus{
    width: 120px;
    height: 25px;
    margin: auto;
    border: 1px solid #B7B7B7;
    position: relative;
  }
  :deep(.el-dropdown){
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
    color: #B7B7B7;
    .el-dropdown-link {
      cursor: pointer;
      color: var(--el-color-primary);
      display: flex;
      align-items: center;
    }
  }
}
</style>
